Simple Checkout

Paylode simple Checkout is an inline smart payment form that works seamlessly across devices. It supports all the payment methods you get with the checkout standard integration

How it works

Paylode simple checkout allows you to embed the payment form on your webpage using our Paylodecheckout() JavaScript function. The function responds to your request in accrodancewith the request configuration set. If you specify a redirect_url inyour request, the function will redirect your users to the provided redirect URL when they complete the payment.

Parameter Description

Name	Type	Description	Required
public key	`string`	public key can be found on the paylode dashboard settings>API key	True
currency	`string`	Payment Currency	True
amount	`string`	Amount to be paid	True

Before you begin

Ensure you have your public key. You can find this on the Paylode Merchant dashboard under Settings > api keys. If you don’t have an account with us yet, you can create a test account now

Add the code snippet to your site

Adding the checkout.js script to your page
Adding this will automatically inlcude all the features and payment methods the paylode checkout has.

checkout.html
<html>
  <head>
    <title>Sample Paylode Checkout</title>
    <script src="https://checkout.paylodeservices.com/checkout.js"></script>
  </head>
  <body>
    <button onlick="Paylodecheckout()">Pay Now</button>
  </body>
</html>

Adding the Paylode.js script to your page

Adding this will automatically inlcude all the features and payment methods the Paylode checkout has. Including our advanced fraud detection tools whenever your customers attempts to make a payment.

checkout.html
<html>
  <head>
     <title>Sample Paylode Checkout</title>
    <script src="https://checkout.paylodeservices.com/checkout.js"></script>
  </head>
  <body>
    <button onlick="Checkout()">Pay Now</button>

   <script type ="text/javascript">
   const Checkout = () => {
    var handler = PaylodeCheckout.setup({
    //replace with your public key
    "publicKey": "PLPK_**************",
    "phoneNumber": "090*********"
    "currency": "NGN",
    "amount": "150.00",
    "email": "[email protected]",
    "firstName": "John", //optional
    "lastName": "Doe", //optional
   "redirectUrl": "http://yourdomain.com",

   function callback(response, closeModal) {
    console.log(response) //response of transaction
   },
   function close(close) {
    console.log(close) //transaction close
   }
 })
    handler.openIframe()
  }
  </script>

 </body>
</html>

Important notes

The publicKey field here takes your Paylode public key on the merchant dashboard.
The amount should be in the subunit of the supported currency.
It's ideal to generate a unique reference from your system for every transaction to avoid duplicate attempts.
The callback method is called when payment has been completed successfully on the Paystack checkout. See the next section to see for how to handle the callback.
the onClose method is called if the user closes the modal without completing payment.

Handle the callback method

The callback method is triggered when the transaction is completed. This is where you verify the transaction status.In your callback function, you should make a request to your server where the verification is performed:

callback: function(response){
  // make API request to your server or serveless function here
}

Verify Transaction

If the payment goes through successfully, Paylode will send the user back to a reirect callback_url chosen. This link will have the transaction reference added to it.

So you retrieve the reference from the URL parameter and use that to call the verify endpoint to confirm the status of the transaction.

It is advisable to check the status of transactions using the Verify endpoint before you complete the transaction.

curl
curl -X 'GET' \
  'https://paymentgatewayapi.paylodeservices.com/v1/payment/status?ClientReference=678888888yvyg788&TransactionReference=g8h98y9uy6f568999&SessionReference=ioohhohuiouhuhu7y78y9y0008h8' \
  -H 'accept: application/json' \
  -H 'public-key: pbl_ioinoubyg698u9'

How it works​

Parameter Description​

Before you begin​

Add the code snippet to your site​

Adding the Paylode.js script to your page​

Important notes​

Handle the callback method​

Verify Transaction​